<script setup lang="ts">
  import type { Category } from '@/types/api'

  interface Props {
    category: Category
    depth: number
    selectedId?: string
    expandedCategories: Set<string>
  }

  const props = withDefaults(defineProps<Props>(), {
    selectedId: '',
  })

  const emit = defineEmits<{
    select: [category: Category]
    toggle: [string]
  }>()

  // 获取分类图标
  const getCategoryIcon = () => {
    return '📁' // 所有分类都使用文件夹图标
  }

  // 获取缩进样式
  const getIndentStyle = (depth: number) => {
    return {
      paddingLeft: `${depth * 1.5 + 0.5}rem`,
      position: 'relative' as const,
    }
  }

  // 检查分类是否展开
  const isCategoryExpanded = (categoryId: string) => {
    return props.expandedCategories.has(categoryId)
  }

  // 选择分类
  const handleSelect = () => {
    emit('select', props.category)
  }

  // 切换展开状态
  const handleToggle = () => {
    emit('toggle', props.category.id)
  }
</script>

<template>
  <div class="category-tree-node">
    <!-- 当前分类节点 -->
    <div
      class="category-node"
      :class="{
        selected: selectedId === category.id,
        'has-children': category.children && category.children.length > 0,
      }"
      :style="getIndentStyle(depth)"
      @click="handleSelect"
    >
      <!-- 连接线 -->
      <div v-if="depth > 0" class="tree-line"></div>

      <!-- 展开/折叠按钮 -->
      <span
        v-if="category.children && category.children.length > 0"
        class="expand-icon"
        @click.stop="handleToggle"
      >
        {{ isCategoryExpanded(category.id) ? '−' : '+' }}
      </span>

      <!-- 分类图标 -->
      <span class="category-icon">{{ getCategoryIcon() }}</span>

      <!-- 分类名称 -->
      <span class="category-name">{{ category.name }}</span>

      <!-- 分类文章数 -->
      <span class="category-count">({{ category.count || 0 }})</span>
    </div>

    <!-- 递归渲染子分类 -->
    <div
      v-if="category.children && category.children.length > 0 && isCategoryExpanded(category.id)"
      class="children-nodes"
    >
      <CategoryTreeNode
        v-for="child in category.children"
        :key="child.id"
        :category="child"
        :depth="depth + 1"
        :selected-id="selectedId"
        :expanded-categories="expandedCategories"
        @select="emit('select', $event)"
        @toggle="emit('toggle', $event)"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .category-tree-node {
    .category-node {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;

      &:hover {
        background: var(--bg-secondary);
      }

      &.selected {
        background: var(--primary-color);
        color: white;

        .category-count {
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .tree-line {
        position: absolute;
        left: calc(var(--depth, 0) * 1.5rem + 0.5rem);
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--border-color);

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          width: 1rem;
          height: 1px;
          background: var(--border-color);
        }
      }

      .expand-icon {
        width: 1.2rem;
        height: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        font-size: 0.8rem;
        font-weight: bold;
        background: var(--bg-secondary);
        color: var(--text-secondary);
        flex-shrink: 0;

        &:hover {
          background: var(--primary-color);
          color: white;
        }
      }

      .category-icon {
        font-size: 1rem;
        flex-shrink: 0;
      }

      .category-name {
        flex: 1;
        font-size: 0.9rem;
        font-weight: 500;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .category-count {
        font-size: 0.8rem;
        color: var(--text-secondary);
        flex-shrink: 0;
      }
    }
  }
</style>
